// 列表页的逻辑代码
/*
  接口
    + 请求地址: /goods/list
    + 请求方式: get
    + 携带参数
      => current: 表示当前第几页
        -> 上一页下一页的功能
      => pagesize: 表示一页多少条
        -> 一页显示多少条
      => search: 模糊搜索关键字
        -> 文本框输入关键字
      => filter: 可以填写 热销 或者 折扣
        -> 筛选功能
      => saleType: 折扣类型 5 ~ 10
        -> 筛选功能
      => sortType: 表示排序类型 id 或者 sale 或者 price
        -> 排序功能
      => sortMethod: 表示排序方式 ASC 或者 DESC
        -> 排序放在一起, 分成升序和降序
      => category: 分类条件
        -> 分类筛选

  如何获取数据
    + 例子:
      => 我需要所有和 电脑 相关的商品
      => 并且只看有折扣的, 并且是 7 折 的商品
      => 按照 price 的 降序排列
      => 一页显示 24 条
      => 要看到的是 第 2 页
    + /goods/list?search=电脑&fliter=折扣&saleType=7&sortType=price&sortMethod=DESC&pagesize=24&current=7
*/

// 0. 获取元素
// 0-1. 获取分类盒子
const cateBox = document.querySelector('.category')
// 0-2. 获取功能盒子
const Box = document.querySelector('.Box')
// 0-3. 获取筛选盒子
const filterBox = document.querySelector('.filter')
// 0-4. 获取折扣类型盒子
const saleTypeBox = document.querySelector('.saleType')
// 0-5. 获取排序按钮
const sortBox = document.querySelector('.sort')
// 0-6. 获取 select 盒子
const select = document.querySelector('select')
// 0-7. 获取 input 搜索盒子
const inps = document.querySelector('.searchBox > input')
// 0-8. 获取页面显示信息盒子
const pageInfoBox = document.querySelector('.pageInfo')
// 0-9. 获取商品列表盒子
const contentBox = document.querySelector('.Content')

// 1. 把所有的分类内容渲染出来
// 1-1. 请求分类列表
getCategoryList()
async function getCategoryList() {
  // 1-2. 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/goods/category',
    dataType: 'json'
  })

  // 1-3. 使用 res 中的 list 成员来渲染 ul 内部的 li
  // 循环拼接字符串
  let str = '<li class="cate active">全部</li>'
  res.list.forEach(item => {
    str += `<li class="cate">${ item }</li>`
  })

  // 1-4. 把 str 插入到 cateBox 内
  cateBox.innerHTML = str
}


// 2. 确定点击哪些按钮, 请求哪些商品
/*
  打开页面:   /goods/list
  点击下一页: /goods/list?current=2
  切换一页显示: /goods/list?pagesize=24
  点击折扣按钮: /goods/list?filter=折扣?current=2
  各种请求, 请求地址一样, 只是携带的参数不一样
    => 回来以后渲染页面的代码一样

  逻辑:
    1. 准备一个对象, 里面写好我需要携带的参数
    2. 书写一个发送请求和函数, 内部按照 准备好的对象 当做参数发送请求
    3. 准备一个渲染页面的函数
*/

// 所有和请求相关的参数信息
const infos = {
  current: 1,
  pagesize: 12,
  search: '',
  filter: '',
  saleType: 10,
  sortType: 'id',
  sortMethod: 'ASC',
  category: ''
}

// 总页数
let total = 10

// 2-2. 各种事件来调整 info 内的信息
// 事件委托, 委托给 box 元素
Box.addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement

  // 2-3. 判断点击的是哪一类按钮
  // 分类按钮
  if (target.className === 'cate') {
    // 点击的这个有类名, 其余所有的没有类名
    for (var i = 0; i < cateBox.children.length; i++) {
      cateBox.children[i].classList.remove('active')
    }
    target.classList.add('active')

    // 拿到分类内容
    infos.category = target.innerText === '全部' ? '' : target.innerText
    infos.current = 1

    // 用最新的 info 请求列表数据
    getGoodsList()
  }

  // 筛选按钮
  if (target.className === 'f') {
    // 点击的这个有类名, 其余所有的没有类名
    for (var i = 0; i < filterBox.children.length; i++) {
      filterBox.children[i].classList.remove('active')
    }
    target.classList.add('active')

    // 拿到筛选内容
    infos.filter = target.dataset.filter ? target.dataset.filter : ''
    infos.current = 1

    // 用最新的 info 请求列表数据
    getGoodsList()
  }

  // 折扣按钮
  if (target.className === 's') {
    for (var i = 0; i < saleTypeBox.children.length; i++) {
      saleTypeBox.children[i].classList.remove('active')
    }
    target.classList.add('active')

    // 拿到筛选内容
    infos.saleType = target.innerText === '全部' ? 10 : target.innerText
    infos.current = 1

    // 用最新的 info 请求列表数据
    getGoodsList()
  }

  // 排序按钮
  if (target.className === 'sort2') {
    for (var i = 0; i < sortBox.children.length; i++) {
      sortBox.children[i].classList.remove('active')
    }
    target.classList.add('active')

    // 拿到当前标签代表的 排序类型(id/sale/price)  排序方式(ASC/DESC)
    infos.sortType = target.dataset.type ? target.dataset.type : 'id'
    infos.sortMethod = target.dataset.method ? target.dataset.method : 'ASC'

    // 用最新的 info 请求列表数据
    getGoodsList()
  }

  // 上一页
  if (target.className === 'prev') {
    // 直接 current--
    if (infos.current <= 1) return
    infos.current--
    getGoodsList()
  }

  // 下一页
  if (target.className === 'next') {
    if(infos.current >= total) return
    infos.current++
    getGoodsList()
  }
})

// 2-3. 选择一页显示多少条
select.addEventListener('change', () => {
  infos.pagesize = select.value
  infos.current = 1
  getGoodsList()
})

// 2-4. 模糊搜索事件
inps.addEventListener('input', () => {
  infos.search = inp.value.trim()
  infos.current = 1
  getGoodsList()
})

// 3. 请求列表数据
getGoodsList()
async function getGoodsList() {
  // 3-1. 把 info 对象转换成 查询字符串
  const data = querystringify(infos)

  // 3-2. 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/goods/list',
    data: data,
    dataType: 'json'
  })

  // 3-3. 给 total 赋值
  total = res.total

  // 3-4. 渲染当前页信息
  pageInfoBox.innerText = `${ infos.current } / ${ total }`

  // 3-5. 渲染商品列表
  let str = ''

  res.list.forEach(item => {
    str += `
      <li>
        <div class="show">
          <img data-id="${ item.goods_id }" src="${ item.img_big_logo }" alt="">
          <span class="hot ${ item.is_hot ? 'active' : '' }"> HOT </span>
          <span class="sale ${ item.is_sale ? 'active' : '' }"> SALE </span>
        </div>
        <div class="infos">
          <p class="title">${ item.title }</p>
          <p>
            折扣: ${ item.sale_type }
          </p>
          <p class="price">
            <del class="old"> ￥ ${ item.price } </del>
            <span class="current"> ￥ ${ item.current_price } </span>
          </p>
          <p>
            <button data-id="${ item.goods_id }">加入购物车</button>
          </p>
        </div>
      </li>
    `
  })

  contentBox.innerHTML = str
}


// 4. 每一个商品的点击事件
// 点击的时候可以跳转到详情页
// 4-1. 事件委托
contentBox.addEventListener('click', async e => {
  e = e || window.event
  const target = e.target || e.srcElement

  //4-2. 判断点击的是什么
  if (target.nodeName === 'IMG') {
    // window.location.href = './detail.html'

    // 拿到商品 id, 放在 sessionStorage 内
    // 渲染页面的时候, 可以直接渲染好
    const id = target.dataset.id
    // 存储好
    window.sessionStorage.setItem('id', id)
    // 跳转页面
    window.location.href = '../views/detail.html'
  }

  // 判断加入购物车
  if (target.nodeName === 'BUTTON') {
    // 如果你没有登录, 不能加入购物车
    // 验证登录过
    // 4-2-1. 判断是否登录过
    // login 信息
    const login = window.localStorage.getItem('login')
    if (!login) {

      // 跳转回到登录页
      window.localStorage.setItem('url', 'list')
      window.location.href = '../views/login.html'
      return
    }

    // 4-2-2. 拿到 商品id 和 用户id
    const id = window.localStorage.getItem('id')
    const goods_id = target.dataset.id
    const token = window.localStorage.getItem('token')

    // 4-2-3. 发送请求加入购物车
    const res = await pAjax({
      url: 'http://localhost:8888/cart/add',
      method: 'POST',
      data: `id=${ id }&goodsId=${ goods_id }`,
      dataType: 'json',
      token: token
    })

    /// 4-2-4. 判断是否加入成功了
    if (res.code !== 1) {
      // 跳转回到登录页
      window.localStorage.setItem('url', 'list')
      window.location.href = './login.html'
      return
    }

    // 代码执行到这里, 说明登录完成, 已经加入购物车完成
    alert('加入购物车成功')
  }
})
